// Hero
//
// The Hero is a large box area used to showcase something important. On the
// homepage it displays the A11Y Banner component.
//
// <div class="c-hero">
//   <!-- Hero content goes here -->
// </div>
//
// Style guide: Components.hero
.c-hero {
	position: relative;
	overflow: hidden;
	@include var(background-color, hero-background);

	& > svg {
		position: absolute;
		top: 50%;
		min-width: 100%;
		transform: translateY(-50%);
		@include var(color, hero-background-text);
	}

	// Contexts
	.template-home & {
		& > svg {
			min-height: 100%;
		}
	}
}

.c-hero-summary {
	border-top-style: solid;
	border-top-width: $border-thicker;
	font-family: $font-family-secondary;
	letter-spacing: $font-tracking-slight;
	text-align: center;
	padding: 0.75rem;
	@include var(background-color, hero-content-background);
	@include var(color, hero-content-text);
	@include var(border-top-color, hero-content-accent);

	// Breakpoints
	@include mappy-bp(palm-large) {
		padding: 0.75rem 2rem;
	}
}
